<!-- 基本资料 -->
<template>
    <view class="base-info-main-box">
        <view class="base-info-box">
            <view class="base-info-head">
                基本信息
            </view>
            <view class="base-info-main">
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon67.png" alt=""><text>ID</text><text>{{ props.userInfo.IMId }}</text><img @click="copy(props.userInfo.IMId)"
                        src="@/assets/image/icon55.png" />
                </view>
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon65.png" alt=""><text>个性签名</text><text>{{ props.userInfo.Intro }}</text>
                </view>
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon60.png" alt=""><text>出生日期</text><text>{{ props.userInfo.Birthday && props.userInfo.Birthday.split(' ')[0] }}</text>
                </view>
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon64.png" alt=""><text>常住地址</text><text>{{ props.userInfo.CityText }}</text>
                </view>
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon63.png" alt=""><text>身高体重</text><text>{{ props.userInfo.Height + 'cm ' +
                        props.userInfo.Weight + 'kg' }}</text>
                </view>
                <view class="base-info-main-item">
                    <img src="@/assets/image/icon66.png" alt=""><text>职业</text><text>{{ props.userInfo.StrJob }}</text>
                </view>
            </view>
        </view>
        <view class="base-info-box base-info-box-label">
            <view class="base-info-head base-info-head-no">
                个性标签
            </view>
            <view class="base-info-main">
                <view class="base-info-main-item" v-for="(item, index) in state.tagsList" :key="item.ID">
                    <img :src="index == 0 ? c1 : index == 1 ? c2 : c3" alt=""><text>{{ item.ShowName }}</text>
                    <view class="label-list">
                        <view class="label-item" v-for="itemTag in item.Tags" :key="itemTag.ID">{{ itemTag.TagName }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="base-info-box base-info-box-label" v-if="!props.isPerson">
            <view class="base-info-head base-info-head-no">
                礼物墙
            </view>
            <view class="base-info-gift-wall">
                <view class="base-info-gift-wall-item" v-for="item in state.giftList" :key="item.ID"><img :src="item.ImgUrl" alt="">
                    <view class="gift-wall-name">{{item.GiftName}}</view>
                    <view class="gift-wall-num">{{item.Count}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue"
import c1 from '@/assets/image/icon61.png'
import c2 from '@/assets/image/icon62.png'
import c3 from '@/assets/image/icon59.png'
import { onLoad } from '@dcloudio/uni-app'

let { proxy } = getCurrentInstance()

const state = reactive({
    active: 0,
    userId: "",
    tagsList:[],
    giftList:[]
})

import {
    GiftUrl
} from "@/api/user/index.js"

import {
    UserTag
} from "@/api/person/index.js"

let props = defineProps({
    userInfo: {
        type: Object,
        default: () => { }
    },
    tagsList: {
        type: Array,
        default: () => []
    },
    isPerson: {
        type: Boolean,
        default: false
    }
})

let { active } = toRefs(state)


const GiftUrlFn = async () => {
    let data = await proxy.$get(GiftUrl(state.userId))
    if(data.code == 200){
        state.giftList = data.data
    }
}

const UserTagFn = async () => {
    let params = {
        userId:state.userId
    }
    let data = await proxy.$get(UserTag,params)
    if(data.code == 200){
        state.tagsList = data.data
    }
}

const copy = (id) => {
    uni.setClipboardData({
        data: id, //要被复制的内容
        success: () => { //复制成功的回调函数
            uni.showToast({
                title: "用户id复制成功",
                icon: 'none',
                duration: 2000
            });
        }
    });
}

onLoad((options) => {
    if (options.userId) {
        state.userId = options.userId
        GiftUrlFn()
        UserTagFn()
    }
})

</script>

<style lang="scss" scoped>
.base-info-box {
    border-radius: 12rpx;
    overflow: hidden;
    border: 1px solid #E8E8E8;
    margin-bottom: 30rpx;
}

.base-info-head {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background: url("@/assets/image/icon56.png") no-repeat;
    background-size: 100%;
    font-weight: 600;
}

.base-info-main {
    .base-info-main-item {
        display: flex;
        align-items: center;
        height: 64rpx;
        line-height: 64rpx;
        padding: 0 30rpx;
        font-size: 28rpx;

        img {
            width: 24rpx;
            height: 24rpx;
            margin-right: 15rpx;
        }

        text:nth-child(1) {
            flex: none;
        }

        text:nth-child(2) {
            display: block;
            width: 140rpx;
            color: #929292;
        }

        text:nth-child(3) {
            display: block;
            margin-right: 15rpx;
            height: 64rpx;
            overflow: hidden;
        }
    }
}

.base-info-head-no {
    background: none;
}

.base-info-box-label {
    .base-info-main-item {
        display: flex;
        align-items: flex-start;
        height: auto;
        line-height: 44rpx;
        margin-bottom: 10rpx;

        img,
        text {
            flex: none;
        }

        img {
            position: relative;
            top: 8rpx;
        }
    }

    .label-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .label-item {
            width: 122rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            font-size: 24rpx;
            background: #EEEEEE;
            margin: 0 15rpx 15rpx 0;

        }
    }
}

.base-info-gift-wall {
    display: flex;
    padding: 30rpx;

    .base-info-gift-wall-item {
        width: 25%;
        text-align: center;
        font-size: 24rpx;

        img {
            width: 80%;
        }

        .gift-wall-name {
            margin: 20rpx 0;
        }

        .gift-wall-num {
            font-size: 24rpx;
        }

        .gift-wall-num::before {
            content: "X";
            font-size: 10rpx;
        }

    }
}
</style>
